<template>
  <div class="color-wrapper">
    <div class="colormap" :style="colormap">
      <div class="color-tip">
        <ul>
          <li>0%</li>
          <li>25%</li>
          <li>50%</li>
          <li>75%</li>
          <li>100%</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { colorByPCT } from '@/util/tool';
  import { computed } from 'vue';

  let colormap = computed(() => {
    const minColor = colorByPCT(0);
    const step1Color = colorByPCT(25);
    const step2Color = colorByPCT(50);
    const step3Color = colorByPCT(75);
    const maxColor = colorByPCT(100);
    return {
      position: 'relative',
      width: '100%',
      height: '20px',
      'border-radius': '5px',
      'background-image': `linear-gradient(to right, ${minColor.toCssColorString()}, ${step1Color.toCssColorString()}, ${step2Color.toCssColorString()},${step3Color.toCssColorString()}, ${maxColor.toCssColorString()})`,
    };
  });
</script>

<style lang="scss" scoped>
  .color-wrapper {
    margin: 2em 0em;
    .colormap {
      height: 1em;
    }
    .color-tip {
      ul {
        position: absolute;
        display: flex;
        font-size: 13px;
        width: 100%;
        justify-content: space-between;
        bottom: -150%;
        list-style: none;
      }
    }
  }
</style>
